<template>
  <!-- 能耗统计 -->
  <div class="energy-total chart-box1">
    <div class="chart-title">能耗统计</div>
    <div class="total-info chart-content">
      <div class="box">
        <div class="icon">
          <cu-icon type="org-dian" :style="{ color: primaryOrange }" />
        </div>
        <div class="mt-5">
          <span class="number" :style="{ color: primaryOrange }">
            <count-to
              :start-val="data.today_electric.oldVal"
              :end-val="data.today_electric.newVal"
              :duration="3000"
            />
          </span>
          <span class="ml-4 text-white">kw</span>
        </div>
        <div>当日用电</div>
      </div>
      <div class="box">
        <div class="icon">
          <cu-icon type="org-shui" :style="{ color: primaryGreen }" />
        </div>
        <div class="mt-5">
          <span class="number" :style="{ color: primaryGreen }">
            <count-to
              :start-val="data.today_water.oldVal"
              :end-val="data.today_water.newVal"
              :duration="3000"
            />
          </span>
          <span class="ml-4 text-white">㎡</span>
        </div>
        <div>当日用水</div>
      </div>
      <div class="box" style="flex: 3; line-height: 3.6rem">
        <div class="flex space-between align-center" style="width: 100%">
          <div class="flex align-center">
            <cu-icon
              type="org-yujikaizhi"
              class="title-icon"
              :style="{ color: primaryColor }"
            />
            <span>预计开支</span>
          </div>
          <div class="flex align-center">
            <span class="number">
              <count-to
                :start-val="data.expect_pay_money.oldVal"
                :end-val="data.expect_pay_money.newVal"
                :duration="3000"
              />
            </span>
            <span class="ml-4">元</span>
          </div>
        </div>
        <div class="flex space-between align-center" style="width: 100%">
          <div class="flex align-center">
            <cu-icon
              type="org-mianjunyongdian"
              class="title-icon"
              :style="{ color: primaryColor }"
            />
            <span>面均用电</span>
          </div>
          <div class="flex align-center">
            <span class="number">
              <count-to
                :start-val="data.square_metre_electric.oldVal"
                :end-val="data.square_metre_electric.newVal"
                :duration="3000"
              />
            </span>
            <span class="ml-4">kw</span>
          </div>
        </div>
        <div class="flex space-between align-center" style="width: 100%">
          <div class="flex align-center">
            <cu-icon
              type="org-mianjunyongshui"
              class="title-icon"
              :style="{ color: primaryColor }"
            />
            <span>面均用水</span>
          </div>
          <div class="flex align-center">
            <span class="number">
              <count-to
                :start-val="data.square_metre_water.oldVal"
                :end-val="data.square_metre_water.newVal"
                :duration="3000"
              />
            </span>
            <span class="ml-4">㎡</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { defineComponent, reactive, toRaw, toRefs, watch } from "vue";
import store from "../../../../store";
import common from "../../utils/common";
import CountTo from "../countTo/index.vue";

export default defineComponent({
  name: "EnergyTotal",
  components: { CountTo },
  setup(props) {
    const state = reactive({
      ...common.theme,
      data: {
        // 当日用电
        today_electric: {
          ...common.countToInit,
        },
        // 当日用水
        today_water: {
          ...common.countToInit,
        },
        // 预计开支
        expect_pay_money: {
          ...common.countToInit,
        },
        // 面均用电
        square_metre_electric: {
          ...common.countToInit,
        },
        // 面均用水
        square_metre_water: {
          ...common.countToInit,
        },
      },
    });

    watch(
      () => store.getters.synthetical.EnergyTotal,
      (val) => {
        if (val) {
          getData();
        }
      }
    );

    const getData = () => {
      const { EnergyTotal } = store.getters.synthetical;
      if (EnergyTotal) {
        console.log("---------------EnergyTotal", toRaw(EnergyTotal));
        for (let key in EnergyTotal) {
          let newItem = {
            oldVal: state.data[key]["newVal"],
            newVal: Number(EnergyTotal[key]),
          };
          state.data[key] = { ...newItem };
        }
      }
    };

    const init = () => {
      getData();
    };
    init();

    return {
      ...toRefs(state),
    };
  },
});
</script>

<style lang="less" scoped>
@import "../../styles/common.less";
.energy-total {
  .total-info {
    display: flex;
    font-size: 1.2rem;

    .box {
      flex: 2;
      height: 100%;
      //   background: @primaryBlackBg;
      display: flex;
      align-items: center;
      justify-content: center;
      flex-direction: column;
      padding: 0 1rem;
      &:not(:last-child) {
        border-right: 1px solid @whiteBorder;
      }
      .icon {
        width: 4rem;
        height: 4rem;
        border-radius: 50%;
        border: 1px solid @whiteBorder;
        display: flex;
        align-items: center;
        justify-content: center;
        font-size: 2rem;
      }
      .title-icon {
        font-size: 1.8rem;
        margin-right: 0.8rem;
      }
    }
  }
}
</style>
